<template>
    <div class='home-head'>
        <div class='home-head-addr'>
            <div class='home-head-addr-content'>
                <span class='iconfont addr-icon-left'>&#xe63f;</span>建大四小区<span class='iconfont addr-icon-right'>&#xe62d;</span>
            </div>
        </div>
        <div class='home-head-search'>
            <router-link tag='div' to='/' class='home-head-search-link'>
                <span class='iconfont search-icon'>&#xe632;</span>搜索饿了么商家、商品名称
            </router-link>
        </div>
    </div>
</template>

<script>
export default {
  name: 'HomeHeader'
}
</script>

<style lang='stylus' scoped>
  .home-head
    position: fixed
    top: 0
    right: 0
    left: 0
    background: #0085ff
    width: 100%
    height: 0
    padding-bottom: 24%
    .home-head-addr
      color: #fff
      font-size: 1.1rem
      font-weight: bold
      height: 0
      margin: 0 auto
      padding-bottom: 12%
      .home-head-addr-content
        position absolute
        top: .7rem
        left: .9rem
        right: .9rem
        .addr-icon-left
          font-size: 1.2rem
          padding-right: .2rem
        .addr-icon-right
          font-size: .5rem
          padding-left: .2rem
    .home-head-search
      width: 100%
      position absolute
      right: 0
      left: 0
      height: 0
      padding-bottom: 12%
      .home-head-search-link
        background: #fff
        width: 92%
        height: 2.2rem
        margin: .2rem auto
        line-height: 2.2rem
        text-align: center
        color: #999999
        .search-icon
          padding-right: .2rem
</style>
